<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米手机 - 小米商城</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <!-- 顶部导航栏 -->
    <header class="header">
        <div class="container">
            <div class="header-top">
                <div class="header-left">
                    <a href="index.html" class="logo">
                        <img src="https://s02.mifile.cn/assets/static/image/logo-mi2.png" alt="小米">
                    </a>
                </div>
                <nav class="header-nav">
                    <ul>
                        <li><a href="phones.html" class="active">小米手机</a></li>
                        <li><a href="redmi.html">Redmi红米</a></li>
                        <li><a href="tv.html">电视</a></li>
                        <li><a href="laptop.html">笔记本</a></li>
                        <li><a href="tablet.html">平板</a></li>
                        <li><a href="appliance.html">家电</a></li>
                        <li><a href="router.html">路由器</a></li>
                        <li><a href="service.html">服务</a></li>
                        <li><a href="community.html">社区</a></li>
                    </ul>
                </nav>
                <div class="header-right">
                    <div class="search-box">
                        <input type="text" placeholder="搜索商品">
                        <button type="submit"><i class="fas fa-search"></i></button>
                    </div>
                    <div class="user-actions">
                        <a href="#" class="login">登录</a>
                        <a href="#" class="register">注册</a>
                        <a href="#" class="cart"><i class="fas fa-shopping-cart"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <!-- 主要内容区域 -->
    <main class="main">
        <!-- 页面标题 -->
        <section class="page-header">
            <div class="container">
                <h1>小米手机</h1>
                <p>为发烧而生，为梦想而战</p>
            </div>
        </section>

        <!-- 产品筛选 -->
        <section class="filter-section">
            <div class="container">
                <div class="filter-tabs">
                    <button class="filter-tab active">全部</button>
                    <button class="filter-tab">旗舰系列</button>
                    <button class="filter-tab">数字系列</button>
                    <button class="filter-tab">青春系列</button>
                </div>
            </div>
        </section>

        <!-- 产品展示 -->
        <section class="products-section">
            <div class="container">
                <div class="product-grid">
                    <div class="product-card">
                        <div class="product-image">
                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/mi13-product.jpg" alt="小米13">
                            <div class="product-badge">新品</div>
                        </div>
                        <div class="product-info">
                            <h3>小米13</h3>
                            <p class="product-desc">徕卡专业光学镜头 | 骁龙8 Gen 2</p>
                            <p class="product-price">¥3999起</p>
                            <button class="btn-buy">立即购买</button>
                        </div>
                    </div>
                    <div class="product-card">
                        <div class="product-image">
                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/mi12-product.jpg" alt="小米12">
                        </div>
                        <div class="product-info">
                            <h3>小米12</h3>
                            <p class="product-desc">骁龙8 Gen 1 | 5000万像素主摄</p>
                            <p class="product-price">¥2999起</p>
                            <button class="btn-buy">立即购买</button>
                        </div>
                    </div>
                    <div class="product-card">
                        <div class="product-image">
                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/mi11-product.jpg" alt="小米11">
                        </div>
                        <div class="product-info">
                            <h3>小米11</h3>
                            <p class="product-desc">骁龙888 | 1亿像素主摄</p>
                            <p class="product-price">¥2499起</p>
                            <button class="btn-buy">立即购买</button>
                        </div>
                    </div>
                    <div class="product-card">
                        <div class="product-image">
                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/mi10-product.jpg" alt="小米10">
                        </div>
                        <div class="product-info">
                            <h3>小米10</h3>
                            <p class="product-desc">骁龙865 | 1亿像素四摄</p>
                            <p class="product-price">¥1999起</p>
                            <button class="btn-buy">立即购买</button>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- 底部 -->
    <footer class="footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-section">
                    <h3>购物指南</h3>
                    <ul>
                        <li><a href="#">账户管理</a></li>
                        <li><a href="#">购物指南</a></li>
                        <li><a href="#">订单操作</a></li>
                    </ul>
                </div>
                <div class="footer-section">
                    <h3>配送方式</h3>
                    <ul>
                        <li><a href="#">上门自提</a></li>
                        <li><a href="#">211限时达</a></li>
                        <li><a href="#">配送服务查询</a></li>
                    </ul>
                </div>
                <div class="footer-section">
                    <h3>支付方式</h3>
                    <ul>
                        <li><a href="#">货到付款</a></li>
                        <li><a href="#">在线支付</a></li>
                        <li><a href="#">分期付款</a></li>
                    </ul>
                </div>
                <div class="footer-section">
                    <h3>售后服务</h3>
                    <ul>
                        <li><a href="#">售后政策</a></li>
                        <li><a href="#">价格保护</a></li>
                        <li><a href="#">退款说明</a></li>
                    </ul>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2025 alan-小米商城-studying</p>
            </div>
        </div>
    </footer>

    <!-- 登录模态框 -->
    <div id="loginModal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <h2>用户登录</h2>
            <form id="loginForm" class="auth-form">
                <div class="form-group">
                    <label for="loginEmail">邮箱/手机号</label>
                    <input type="text" id="loginEmail" name="email" required>
                </div>
                <div class="form-group">
                    <label for="loginPassword">密码</label>
                    <input type="password" id="loginPassword" name="password" required>
                </div>
                <div class="form-options">
                    <label>
                        <input type="checkbox" name="remember"> 记住我
                    </label>
                    <a href="#" class="forgot-password">忘记密码？</a>
                </div>
                <button type="submit" class="btn btn-primary">登录</button>
                <div class="auth-links">
                    <span>还没有账号？</span>
                    <a href="#" id="showRegister">立即注册</a>
                </div>
            </form>
        </div>
    </div>

    <!-- 注册模态框 -->
    <div id="registerModal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <h2>用户注册</h2>
            <form id="registerForm" class="auth-form">
                <div class="form-group">
                    <label for="registerPhone">手机号</label>
                    <input type="tel" id="registerPhone" name="phone" required>
                </div>
                <div class="form-group">
                    <label for="registerEmail">邮箱</label>
                    <input type="email" id="registerEmail" name="email" required>
                </div>
                <div class="form-group">
                    <label for="registerPassword">密码</label>
                    <input type="password" id="registerPassword" name="password" required>
                </div>
                <div class="form-group">
                    <label for="confirmPassword">确认密码</label>
                    <input type="password" id="confirmPassword" name="confirmPassword" required>
                </div>
                <div class="form-group">
                    <label for="verificationCode">验证码</label>
                    <div class="verification-input">
                        <input type="text" id="verificationCode" name="code" required>
                        <button type="button" class="btn btn-secondary" id="sendCode">发送验证码</button>
                    </div>
                </div>
                <div class="form-options">
                    <label>
                        <input type="checkbox" name="agree" required> 我已阅读并同意
                        <a href="#" class="terms-link">《用户协议》</a>和
                        <a href="#" class="terms-link">《隐私政策》</a>
                    </label>
                </div>
                <button type="submit" class="btn btn-primary">注册</button>
                <div class="auth-links">
                    <span>已有账号？</span>
                    <a href="#" id="showLogin">立即登录</a>
                </div>
            </form>
        </div>
    </div>

    <!-- 购物车模态框 -->
    <div id="cartModal" class="modal">
        <div class="modal-content cart-modal">
            <span class="close">&times;</span>
            <h2>购物车</h2>
            <div id="cartContent">
                <div class="cart-empty" id="cartEmpty">
                    <i class="fas fa-shopping-cart"></i>
                    <p>购物车是空的</p>
                    <a href="#" class="btn btn-primary">去购物</a>
                </div>
                <div class="cart-items" id="cartItems" style="display: none;">
                    <div class="cart-item-list" id="cartItemList">
                        <!-- 购物车商品将在这里动态显示 -->
                    </div>
                    <div class="cart-summary">
                        <div class="cart-total">
                            <span>总计：</span>
                            <span class="total-price">¥0.00</span>
                        </div>
                        <button class="btn btn-primary" id="checkoutBtn">去结算</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 搜索建议下拉框 -->
    <div id="searchSuggestions" class="search-suggestions">
        <div class="suggestion-item">
            <i class="fas fa-search"></i>
            <span>小米13</span>
        </div>
        <div class="suggestion-item">
            <i class="fas fa-search"></i>
            <span>Redmi Note 12</span>
        </div>
        <div class="suggestion-item">
            <i class="fas fa-search"></i>
            <span>小米电视</span>
        </div>
        <div class="suggestion-item">
            <i class="fas fa-search"></i>
            <span>小米笔记本</span>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html> 